<template>
    <view class="main" :style="showBool || soldShow ? 'overflow: hidden;' : ''">
<!--        <u-swiper height="300" :indicator="true" :list="url+classData.carouselImages"></u-swiper> -->
        <image height="300" style="width: 100%;" :src="url+classData.mainImage"></image>
        <view class="rented">
            <view class="rented-price">
                <text class="rented-top-text">
                    <span>￥{{ dataSum }}</span>
                    <text>/天</text>
                </text>
                <h3>热租大牌</h3>
            </view>
            <view class="rented-price" style="font-size: 25rpx">
                <view class="rented-bootom-text">
                    <text>￥{{ classData.leaseGoodSkus[0].leaseRentalRules[0].originalPrice || '' }}天</text>
                    <u-icon name="question-circle" color="#fff"></u-icon>
                </view>
                <text>特划算·安心租</text>
            </view>

            <view class="minute">
                <view class="minute-top">
                    <view class="minute-name">
                        <text>
                            <span>全新</span>
                            {{ classData.productName || '保密中' }}
                        </text>
                    </view>

                    <view class="str-icons">
                        <view class="str-icon" v-for="(item, index) in data" :key="index">
                            <u-icon :name="item.icon"></u-icon>
                            <text>{{ item.str }}</text>
                        </view>
                    </view>

                    <view class="form">
                        <view class="form-row">
                            <view class="form-naem">取件方式</view>
                            <view class="form-text">
                                <view v-model="forRef.chmod" v-for="(item, index) in formData.chmod" :key="index"
                                    @click="chmodbooton(index)">
                                    <text :class="['form-text-background', chmodindex === index ? 'avater' : '']"
                                        style="border: 1px saddlebrown solid">
                                        {{ item }}
                                    </text>
                                </view>
                            </view>
                        </view>
                        <view class="form-row">
                            <view class="form-naem">租期</view>
                            <view class="form-text">
                                <view v-model="forRef.tenancy" v-for="(item, index) in formData.tenancy" :key="index"
                                    @click="tenancybooton(index, item)">
                                    <text :class="['form-text-background', tenancyindex === index ? 'avater' : '']"
                                        :style="{ backgroundColor: tenancyindex === index ? '#EDF4FF' : '#F5F5F5' }">
                                        {{ item }}
                                    </text>
                                </view>
                                <text v-model="forRef.tenancy"
                                    :class="['form-text-background', tenancyindex === -9 ? 'avater' : '']"
                                    :style="{ backgroundColor: tenancyindex === -9 ? '#EDF4FF' : '#F5F5F5' }"
                                    @click="openInput()">
                                    {{ numdata ? numdata + '天' : '自定义' }}
                                </text>
                            </view>

                            <u-popup round="20" :overlay="false" :show="showInput" @close="close" mode="center">
                                <view class="popup">
                                    <input v-model="numdata" type="text" placeholder="请输入租期天数" />
                                    <text class="error-text">{{ numdataVerifyText }}</text>
                                    <view class="botton">
                                        <button style="background: #ccc; color: #7c5fff; margin-right: 30rpx"
                                            @click="close">取消</button>
                                        <button @click="submitInput()">确认</button>
                                    </view>
                                </view>
                            </u-popup>
                        </view>
                        <view class="form-row">
                            <view class="form-naem">数量</view>
                            <view class="form-text">
                                <u-icon name="minus-circle" size="25" @click="count(-1)"></u-icon>
                                <text class="number">{{ forRef.num }}</text>
                                <u-icon name="plus-circle" size="25" @click="count(1)"></u-icon>
                            </view>
                        </view>
                    </view>

                    <view class="minute-bottom">
                        <view class="img-background">
                            <view class="minute-top">——放心租——</view>
                            <view class="minute-bot">
                                <view v-for="(item, index) in peaceList" class="minute-img">
                                    <image :src="item.img" style="width: 46rpx; height: 46rpx"></image>
                                    <text>{{ item.name }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

			<particulars
				style="margin-top: 30rpx"
				 :id="classData"
				:detailsArray="[classData.detailImages, classData.faqImages, classData.parameterImages, classData.parameterImages]"
			></particulars>
		</view>

        <view class="footer">
            <view class="footer-margin">
                <view class="top">
                    <view>
                        <text>合计：</text>
                        <text class="picker">￥{{ numberSum }}</text>
                        <text class="tag">惠</text>
                    </view>

                    <view class="rental">日租价：￥{{ dataSum }}/天</view>
                </view>
                <view class="bootom">
                    <view class="bootom-display" @click="booton('home')">
                        <img src="/static/tabBar/index.png" class="imgs" />
                        <text>首页</text>
                    </view>
                    <view class="bootom-display" @click="keFu()">
                        <img src="/static/main/Frame2x.png" class="imgs" />
                        <text>客服</text>
                    </view>
                    <view class="bootom-display" @click="collectionBool ? deleteCollectin(1) : setCollection()">
                        <img v-if="!collectionBool" src="/static/main/3x.png" class="imgs" />
                        <img v-else src="/static/main/3y.png" class="imgs" />
                        <text>收藏</text>
                    </view>
                    <view><button @click="deposit()">免押租</button></view>
                </view>
            </view>
        </view>

        <u-popup :round="20" :show="depositShow" mode="bottom" @close="depositClose">
            <view class="deposit-bootom">
                <view class="top">
                    乐亨租赁
                    <text>申请</text>
                </view>
                <view class="deposit-text">
                    <text class="name-text">获取你的头像和昵称</text>
                    <text>将用于为你提供本应用当前服务</text>
                </view>
                <view class="deposit-avater">
                    <view class="avater-image">
                        <image style="width: 88rpx; height: 88rpx" src="/static/main/cs02.jpg" mode="aspectFill">
                        </image>
                        <text>头像</text>
                    </view>
                    <view class="avater-button">更换</view>
                </view>
                <view class="deposit-button">
                    <button class="left">拒绝</button>
                    <button @click="hotline()">同意</button>
                </view>
            </view>
        </u-popup>

        <u-popup :round="20" :closeable="true" :show="hotlineShow" mode="center" @close="hotlineClose">
            <view class="hotline-center">
                <view class="hotline-top">
                    <view style="display: flex; align-items: center">
                        <image style="width: 88rpx; height: 88rpx" src="/static/main/cs02.jpg" mode="aspectFill">
                        </image>
                        <view class="hotline-text">
                            <text style="font-weight: 600; line-height: 60rpx">平台热线</text>
                            <text style="font-size: 26rpx; color: #777777">0719-135687612</text>
                        </view>
                    </view>
                    <u-icon name="arrow-right" size="25"></u-icon>
                </view>

                <view style="margin-top: 30rpx; font-weight: 500">
                    <span style="color: red">*</span>
                    <text>扫码添加客服微信</text>
                </view>

                <view class="hotline-m">
                    <image style="width: 250rpx; height: 250rpx" src="/static/main/cs01.jpg" mode="aspectFill"></image>
                </view>
            </view>
        </u-popup>

        <u-popup :round="20" :show="soldShow" mode="center">
            <view class="sold-center">
                <view class="sold-text">商品已下架，请重新选择商品</view>
                <button @click="soldClose()">确认</button>
            </view>
        </u-popup>
    </view>
</template>

<script>
import particulars from '@/subPages/components/particulars.vue';
import api from '@/api/index.js';
import main from '@/api/main.js';
import { getDate } from '@/utils/index.js';
import {baseUrl} from "../../config.js"
export default {
	components: {
		particulars
	},
	data() {
		return {
			showBool: false, //控制数控是否可以滚动
			soldShow: false, //商品下架通知
			hotlineShow: false, //热线扫码弹窗
			depositShow: false, //免押租弹框控制
			showInput: false, // 控制输入框的显示与隐藏
			numdata: null, //租期天数
			numberSum: 0, //合计金额
			dataSum: 0, //日租金
			classData: {},
			//放心租
			peaceList: [
				{ img: '/static/main/Group90x.png', name: '假一赔三' },
				{ img: '/static/main/Group92.png', name: '全国联保' },
				{ img: '/static/main/Group93.png', name: '免赔保障' },
				{ img: '/static/main/Group91.png', name: '隐私清除' }
			],
			url:"",
			data: [
				{
					str: '平台担保',
					icon: 'rmb-circle'
				},
				{
					str: '信用免押',
					icon: 'rmb-circle'
				},
				{
					str: '租后无忧',
					icon: 'rmb-circle'
				},
				{
					str: '现货现发',
					icon: 'rmb-circle'
				}
			],

			formData: {
				chmod: ['邮寄', '自提'],
				tenancy: ['1月', '2月', '6月', '1年']
			},
			chmodindex: 0,
			tenancyindex: 0,

                forRef: {
                    chmod: '邮寄', //取件方式
                    tenancy: null, //天数
                    num: 1 //租物数量
                },
                id: null,
                //判断是否被收藏
                collectionBool: false,
                //判断自定义天数
                numdataVerifyText: ''
            };
        },
        onLoad(e) {
            // this.setCollection();
            // console.log(e, "....e");
            this.id = e.id
            // console.log(this.id, "....this.ids");
            if (e.id) {
                //获取商品详情
                this.getIdClass(e.id);
                this.id = e.id
                console.log(e.id, this.id, "id：")
                this.getCollectionId();
            }
            this.tenancybooton(0, '1月');
        },
		mounted(){
		 this.url = baseUrl
		    const pages = getCurrentPages(); // 获取当前页面栈
		     const currentPage = pages[pages.length - 1]; // 当前页面
		     const query = currentPage.options; // 获取跳转时传递的参数
	         this.id = query
		},
        methods: {
            keFu(){
                this.hotlineShow==true;
            },
            //自定义天数校验
            numdataVerify() {
                const value = this.numdata.trim();
                const regex = /^\d{1,4}$/;
                if (!regex.test(value)) {
                    this.numdataVerifyText = '请输入0-9999之间的整数';
                    return false;
                }
                this.numdataVerifyText = '';
                return true;
            },
            soldClose() {
                //商品已下架，返回上级页面
                uni.navigateBack({
                    data: 1
                });
            },
            deposit() {
                //免押租
                // this.depositShow = true;
                // this.showBool = true;
                this.forRef.numberSum = this.numberSum;
                this.forRef.id = this.id;
                //新增订单信息
                console.log('qgagfuagf', this.forRef);
                uni.navigateTo({
                    url: `/subPages/mine/order?forRef=${encodeURIComponent(JSON.stringify(this.forRef))}`
                });
            },
            depositClose() {
                this.depositShow = false;
                this.showBool = false;
            },
            hotline() {
                this.depositShow = false;
                this.hotlineShow = true;
                this.showBool = true;
            },
            hotlineClose() {
                this.hotlineShow = false;
                this.showBool = false;
            },
            openInput() {
                this.tenancyindex = -9;
                this.showInput = true; // 显示输入框
            },
            close() {
                this.tenancyindex = 0;
                this.showInput = false; // 隐藏输入框
                this.numdata = null; // 清空输入框内容
            },
            submitInput() {
                // 处理提交逻辑，例如保存数据
                if (this.numdata === null) {
                    this.close();
                }
                if (!this.numdataVerify()) {
                    return;
                }
                this.forRef.tenancy = this.numdata;
                this.showInput = false; // 隐藏输入框
                this.countSum();
            },
            //计算
            countSum() {
                this.numberSum = this.forRef.tenancy * this.forRef.num * this.dataSum;
            },
            count(num) {
                if (this.forRef.num <= 0 && num < 0) {
                    return;
                }
                this.forRef.num += num;
                this.countSum();
            },
            chmodbooton(row) {
                this.chmodindex = row;
            },
            tenancybooton(row, item) {
                this.tenancyindex = row;
                if (item.indexOf('周') != -1) {
                    this.forRef.tenancy = getDate(item, '0', '0');
                } else if (item.indexOf('月') != -1) {
                    this.forRef.tenancy = getDate('0', item, '0');
                } else if (item.indexOf('年') != -1) {
                    this.forRef.tenancy = getDate('0', '0', item);
                }
                this.countSum();
            },
            booton(row) {
                if (row === 'home') {
                    uni.reLaunch({
                        url: '/pages/index'
                    });
                }
            },
            getIdClass(id) {
                main.getIdClass(id) 
                    .then((data) => {
                        console.log(data ,"id====");
                        this.classData = data.data;
							 console.log("65565",this.classData)
                        this.dataSum =
                            (this.classData &&
                                this.classData.leaseGoodSkus &&
                                this.classData.leaseGoodSkus[0] &&
                                this.classData.leaseGoodSkus[0].leaseRentalRules &&
                                this.classData.leaseGoodSkus[0].leaseRentalRules[0]?.everydayPrice) ||
                            5;
                        this.countSum();
                    })
                    .catch((erro) => {
                        console.log(erro);
                    });
            },
            
            
            // addProduct() {
            //   // 准备商品数据，根据实际API要求调整字段
            //   const productData = {
            //     id: this.id, // 可能是商品ID或分类ID，根据实际情况调整
            //     name: this.productName, // 商品名称，需要在data中定义
            //     price: this.productPrice, // 商品价格，需要在data中定义
            //     description: this.productDescription, // 商品描述，需要在data中定义
            //     // 其他必要的商品字段...
            //   };
            
            //   // 调用新增商品API
            //   api.addProduct(productData)
            //     .then((data) => {
            //       // 显示成功提示
            //       uni.showToast({
            //         title: '商品添加成功',
            //         icon: 'success',
            //         duration: 2000
            //       });
                  
            //       // 可选：添加成功后执行其他操作，如返回上一页或刷新列表
            //       setTimeout(() => {
            //         uni.navigateBack(); // 返回上一页
            //       }, 2000);
            //     })
            //     .catch((error) => {
            //       // 显示错误提示
            //       uni.showToast({
            //         title: '添加失败: ' + (error.message || '未知错误'),
            //         icon: 'none',
            //         duration: 3000
            //       });
            //       console.error('添加商品失败:', error);
            //     });
            // },
            
            setCollection() {
                main.setCollection(this.classData)
                    .then((data) => {
                        this.collectionBool = true;
                        uni.showToast({
                            title: '收藏成功',
                            icon: 'success', // 可选 success/loading/none
                            duration: 2000 // 持续时间，单位ms
                        });
                    })
                    .catch((erro) => {
                        console.log(erro);
                    });
            },
            getCollectionId() {
                main.getCollectionId(this.id)
                    .then((data) => {
                        console.log('qwqwqwqwqw', data);
                        // this.collectionBool = true;
                    })
                    .catch((erro) => {
                        console.log(erro);
                    });
            },
            
            // deletFun(ids) {
            //     console.log("123");
            //     address.deleteAddressIds(ids).then((res) => {
            //         console.log(res);
            //         if (res.code == 200) {
            //             uni.showToast({
            //                 title: "删除成功",
            //                 icon: "none",
            //             });
            //             this.getAddressList();
            //         }
            //     });
            // },
            
            
            deleteCollectin() {
                console.log("12345")
                main.deleteCollectin(this.id)
                    .then((data) => {
                        console.log("data,",data);
                        this.collectionBool = false;
                        if (res.code == 200) {
                            uni.showToast({
                                title: "删除成功",
                                icon: "none",
                            });
                            this.getCollectionId();
                        }
                    })
                    .catch((erro) => {
                        console.log(erro);
                    });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .error-text {
        color: #ff4545;
        font-size: 24rpx;
        margin-top: 10rpx;
        position: absolute;
    }

    .main {
        height: 100vh;
        width: 100%;
    }

    .sold-center {
        height: 230rpx;
        width: 600rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .sold-text {
            font-weight: 600;
            margin-top: 50rpx;
            margin-bottom: 50rpx;
        }

        button {
            width: 200rpx;
            height: 70rpx;
            color: #1677ff;
            line-height: 70rpx;
            border-radius: 40rpx;
            background-color: #d8e8fd;
        }
    }

    .hotline-center {
        height: 500rpx;
        width: 600rpx;
        margin: 50rpx;

        .hotline-top {
            margin-top: 20rpx;
            height: 150rpx;
            background-color: #f6faff;
            border-radius: 10rpx;

            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40rpx;

            .hotline-text {
                margin-left: 20rpx;
                display: flex;
                flex-direction: column;
            }
        }

        .hotline-m {
            margin-top: 40rpx;
            display: flex;
            justify-content: center;
        }
    }

    .deposit-bootom {
        height: 400rpx;
        margin: 30rpx 50rpx;

        .top {
            color: #1677ff;
            font-size: 50rpx;
            font-weight: bold;
            display: flex;
            align-items: center;

            text {
                margin-left: 20rpx;
                color: #333;
                font-size: 30rpx;
                font-weight: normal;
            }

            margin-bottom: 20rpx;
        }

        .deposit-text {
            display: flex;
            flex-direction: column;

            .name-text {
                font-weight: 600;
            }

            margin-bottom: 30rpx;
        }

        .deposit-avater {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 50rpx;

            .avater-image {
                display: flex;
                align-items: center;

                image {
                    border-radius: 50%;
                }

                text {
                    margin-left: 10rpx;
                    font-weight: 600;
                }
            }

            .avater-button {
                color: #1677ff;
            }
        }

        .deposit-button {
            display: flex;
            justify-content: space-evenly;

            button {
                width: 200rpx;
                height: 80rpx;
                line-height: 80rpx;
                background-color: #1677ff;
                color: #fff;
                border-radius: 10rpx;
            }

            .left {
                background-color: transparent;
                color: #aaaaaa;
            }
        }
    }

    .imgs {
        width: 34rpx;
        height: 34rpx;
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200rpx;
        background-color: #fff;
        border-radius: 30rpx 30rpx 0 0;

        .footer-margin {
            margin: 20rpx 50rpx;

            .top {
                display: flex;
                align-items: center;

                .picker {
                    color: red;
                    font-size: 35rpx;
                    font-weight: 600;
                    margin-right: 5rpx;
                }

                .rental {
                    margin-left: 100rpx;
                    font-weight: 500;
                }
            }

            .bootom {
                margin-top: 20rpx;
                display: flex;
                justify-content: space-between;

                .bootom-display {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                button {
                    width: 350rpx;
                    height: 80rpx;
                    text-align: center;
                    line-height: 80rpx;
                    background: linear-gradient(270deg, #7c5fff 0%, #3b5dff 100%);
                    color: #fff;
                    border-radius: 40rpx;
                }
            }
        }
    }

    .avater {
        color: #3b5dff;
        border: 1px solid #3b5dff;
    }

    .popup {
        width: 400rpx;
        height: 200rpx;
        margin: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        .botton {
            display: flex;
            align-items: center;
            margin-top: 100rpx;

            button {
                background: linear-gradient(270deg, #7c5fff 0%, #3b5dff 100%);
                color: #fff;
                width: 150rpx;
                height: 60rpx;
                line-height: 60rpx;
                border-radius: 30rpx;
            }
        }
    }

    .rented {
        margin-top: 20rpx;
        padding-top: 30rpx;
        width: 100%;
        height: 200rpx;
        background: linear-gradient(to left, #fe4b70, #ffa75b);
        border-radius: 40rpx 40rpx 0 0;

        .rented-price {
            margin: 0 30rpx;
            display: flex;
            justify-content: space-between;
            color: #fff;

            h3 {
                font-size: 35rpx;
                font-weight: bold;
            }

            .rented-top-text {
                span {
                    font-size: 35rpx;
                    font-weight: bold;
                }

                text {
                    font-size: 28rpx;
                }
            }

            .rented-bootom-text {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-left: 20rpx;

                text {
                    text-decoration: line-through;
                }
            }
        }

        .minute {
            margin-top: 30rpx;
            width: 100%;
            background-color: #fff;
            border-radius: 40rpx 40rpx 0 0;

            .minute-top {
                padding: 30rpx;

                .minute-name {
                    span {
                        background-color: red;
                        color: #fff;
                        margin-right: 15rpx;
                        padding: 0 5rpx;
                        border-radius: 8rpx;
                        font-weight: 400;
                    }

                    font-weight: 500;
                }

                .str-icons {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    margin-top: 30rpx;

                    .str-icon {
                        display: flex;

                        text {
                            margin-left: 5rpx;
                        }
                    }
                }

                .form {
                    margin-top: 30rpx;
                    width: 100%;
                    height: 300rpx;
                    border-radius: 30rpx;
                    background-color: #f8f9ff;
                    padding: 10rpx 0 0 10rpx;

                    position: relative;

                    .form-row {
                        padding: 20rpx;
                        display: flex;
                        align-items: center;

                        .form-naem {
                            font-weight: bold;
                        }

                        .form-text {
                            display: flex;

                            position: absolute;
                            left: 180rpx;
                            font-size: 25rpx;

                            .form-text-background {
                                display: block;
                                width: 85rpx;
                                text-align: center;
                                margin-right: 20rpx;
                                border-radius: 10rpx;
                            }

                            .number {
                                font-size: 30rpx;
                                margin: 0 20rpx;
                                color: #3b5dff;
                            }
                        }
                    }
                }

                .minute-bottom {
                    margin-top: 30rpx;
                    width: 100%;
                    height: 300rpx;
                    border-radius: 30rpx;
                    background-color: #f8f9ff;
                    padding: 10rpx 0 0 10rpx;

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .img-background {
                        width: 614rpx;
                        height: 228rpx;
                        background: url('@/static/main/Rectangle12x.png') no-repeat;
                        background-size: 614rpx 228rpx;
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .minute-top {
                            margin: 0;
                            padding: 0;
                            width: 254rpx;
                            height: 52rpx;
                            background-color: #f03b4f;
                            border-radius: 0 0 50rpx 50rpx;

                            text-align: center;
                            line-height: 50rpx;
                            color: #fff;
                            font-weight: 500;
                            font-size: 28rpx;
                        }

                        .minute-bot {
                            margin-top: 35rpx;
                            width: 100%;
                            display: flex;
                            justify-content: space-evenly;

                            .minute-img {
                                width: 110rpx;
                                height: 110rpx;
                                border-radius: 15rpx;
                                background-color: #fff;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: space-around;

                                font-size: 24rpx;
                                color: #f03b4f;
                            }
                        }
                    }
                }
            }
        }
    }
</style>